<template>
  <div class="scalable-pages">
    <main class="main">
      <div class="container">
        <div class="store-content">
          <div class="store-image"></div>

          <div class="store-selector">
            <!-- 省份选择 -->
            <div class="selector-group">
              <div class="header">
                <span class="selector-label">省：</span>
                <span class="selector-value">{{ selectedProvince }}</span>
              </div>

              <div class="selector-wrap">
                <div class="province-item" v-for="province in visibleProvinces" :key="province.code"
                  @click="onProvinceChange(province)" :class="{ active: province.name === selectedProvince }">
                  <span>{{ province.name }}</span>
                </div>
                <div class="more-btn" v-if="provinces.length > 7" @click="toggleProvincePopup">
                  {{ showProvincePopup ? "收起" : "更多" }}
                </div>
              </div>

              <!-- 省份弹窗 -->
              <div class="selector-popup" v-if="showProvincePopup" @click.stop>
                <div class="popup-header">
                  <span class="selector-label">省：</span>
                  <span class="selector-value">{{ selectedProvince }}</span>
                  <img src="https://www.kdxwindowfilm.com/banners/static/closess.png" class="close-popup"
                    @click="toggleProvincePopup" />
                </div>
                <div class="popup-content">
                  <div class="popup-list">
                    <div class="popup-item active" v-if="selectedProvince">
                      <span>{{ selectedProvince }}</span>
                    </div>
                    <div class="popup-item" v-for="province in unselectedProvinces" :key="province.code"
                      @click="onProvincePopupChange(province)">
                      <span>{{ province.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 城市选择 -->
            <div class="selector-group">
              <div class="header">
                <span class="selector-label">市：</span>
                <span class="selector-value">{{ selectedCity }}</span>
              </div>
              <div class="selector-wrap">
                <div class="city-item" v-for="city in visibleCities" :key="city.code" @click="onCityChange(city)"
                  :class="{ active: city.name === selectedCity }">
                  <span>{{ city.name }}</span>
                </div>
                <div class="more-btn" v-if="cities.length > 7" @click="toggleCityPopup">
                  {{ showCityPopup ? "收起" : "更多" }}
                </div>
              </div>

              <!-- 城市弹窗 -->
              <div class="selector-popup" v-if="showCityPopup" @click.stop>
                <div class="popup-header">
                  <span class="selector-label">市：</span>
                  <span class="selector-value">{{ selectedCity }}</span>
                  <img src="https://www.kdxwindowfilm.com/banners/static/closess.png" class="close-popup"
                    @click="toggleCityPopup" />
                </div>
                <div class="popup-content">
                  <div class="popup-list">
                    <div class="popup-item active" v-if="selectedCity">
                      <span>{{ selectedCity }}</span>
                    </div>
                    <div class="popup-item" v-for="city in unselectedCities" :key="city.code"
                      @click="onCityPopupChange(city)">
                      <span>{{ city.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <p style="font-size: 24px">根据条件筛选到{{ stores.length }}家门店，请下拉菜单查询结果</p>
            <!-- 门店选择 -->
            <div class="store-select-wrap">
              <CustomSelect :options="stores" v-model:selectedOption="selectedStore"
                @update:selectedOption="handleStoreChange" placeholder="请选择">
                <template v-slot:default="{ option }">
                  <div class="custom-option">
                    <div class="name">{{ option.name }}</div>
                    <div class="address">{{ option.address }}</div>
                  </div>
                </template>
              </CustomSelect>

              <div v-if="stores.length === 0 && selectedCity" class="no-store-tip">
                当前城市暂无门店
              </div>
            </div>

            <!-- 门店信息展示区域 -->
            <div class="showInfo" :class="{ active: showStoreInfo }" v-if="selectedStore">
              <div class="store-info">
                <div class="store-title">{{ selectedStore.name }}</div>
                <div class="store-details">
                  <div class="detail-row space-between">
                    <div>
                      <span class="detail-label">门店编号：</span>
                      <span class="detail-value">{{
                        selectedStore.store_code
                      }}</span>
                    </div>
                    <div v-if="selectedStore.store_level > 0">
                      <span class="detail-label">门店级别：</span>
                      <span class="detail-value">
                        {{ formatStoreLevel(selectedStore.store_level) }}
                      </span>
                    </div>
                  </div>
                  <div class="detail-row">
                    <span class="detail-label">地址：</span>
                    <span class="detail-value">{{
                      selectedStore.address
                    }}</span>
                  </div>
                  <!-- <div class="detail-row space-between">
                    <div>
                      <span class="detail-label">电话：</span>
                      <span class="detail-value">{{
                        selectedStore.contact_phone
                      }}</span>
                    </div>
                    <div>
                      <a
                        class="call-btn"
                        :href="'tel:' + selectedStore.contact_phone"
                        >立即拨打</a
                      >
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import CustomSelect from "../components/select/index.vue";

export default {
  components: {
    CustomSelect,
  },
  data() {
    return {
      provinces: [],
      cities: [],
      stores: [],
      selectedProvince: "",
      selectedCity: "",
      selectedStore: null,
      showProvincePopup: false,
      showCityPopup: false,
      showStoreInfo: false,
    };
  },
  computed: {
    visibleProvinces() {
      if (!this.provinces || this.provinces.length === 0) return [];
      const selected = this.provinces.find(
        (p) => p.name === this.selectedProvince
      );
      const others = this.provinces.filter(
        (p) => p.name !== this.selectedProvince
      );
      return selected
        ? [selected, ...others].slice(0, 7)
        : this.provinces.slice(0, 7);
    },
    visibleCities() {
      if (!this.cities || this.cities.length === 0) return [];
      const selected = this.cities.find((c) => c.name === this.selectedCity);
      const others = this.cities.filter((c) => c.name !== this.selectedCity);
      return selected
        ? [selected, ...others].slice(0, 7)
        : this.cities.slice(0, 7);
    },
    unselectedProvinces() {
      return this.provinces.filter((p) => p.name !== this.selectedProvince);
    },
    unselectedCities() {
      return this.cities.filter((c) => c.name !== this.selectedCity);
    },
  },
  created() {
    this.fetchProvinces();
  },
  methods: {
    async fetchProvinces() {
      try {
        const res = await get("/city/list", {});
        if (res.code === 200) {
          this.provinces = res.data || [];
          if (this.provinces.length > 0) {
            this.onProvinceChange(this.provinces[0]);
          }
        }
      } catch (error) {
        console.error("获取省份列表失败:", error);
        this.provinces = [];
      }
    },

    async fetchCities(provinceCode) {
      try {
        const res = await get("/city/list", { code: provinceCode });
        if (res.code === 200) {
          this.cities = res.data || [];
          if (this.cities.length > 0) {
            this.onCityChange(this.cities[0]);
          } else {
            this.stores = [];
            this.selectedCity = "";
            this.showStoreInfo = false;
          }
        }
      } catch (error) {
        console.error("获取城市列表失败:", error);
        this.cities = [];
      }
    },

    async fetchStores(cityName) {
      if (!this.selectedProvince || !cityName) {
        this.stores = [];
        this.showStoreInfo = false;
        return;
      }

      try {
        const res = await get("/store/list", {
          province: this.selectedProvince,
          city: cityName,
          pageSize: 100,
        });
        if (res.code === 200) {
          this.stores = res.data?.list || [];
          this.selectedStore = null;
          this.showStoreInfo = false;
        }
      } catch (error) {
        console.error("获取门店列表失败:", error);
        this.stores = [];
        this.showStoreInfo = false;
      }
    },

    onProvinceChange(province) {
      if (!province?.name) return;
      this.selectedProvince = province.name;
      this.selectedCity = "";
      this.stores = [];
      this.selectedStore = null;
      this.showStoreInfo = false;
      this.fetchCities(province.code);
      this.showProvincePopup = false;
    },

    onCityChange(city) {
      if (!city?.name) return;
      this.selectedCity = city.name;
      this.selectedStore = null;
      this.showStoreInfo = false;
      this.fetchStores(city.name);
      this.showCityPopup = false;
    },

    onProvincePopupChange(province) {
      this.onProvinceChange(province);
    },

    onCityPopupChange(city) {
      this.onCityChange(city);
    },

    toggleProvincePopup() {
      this.showProvincePopup = !this.showProvincePopup;
      if (this.showProvincePopup) {
        this.showCityPopup = false;
      }
    },

    toggleCityPopup() {
      this.showCityPopup = !this.showCityPopup;
      if (this.showCityPopup) {
        this.showProvincePopup = false;
      }
    },

    handleStoreChange(option) {
      this.selectedStore = option;
      this.showStoreInfo = !!option;
    },
    formatStoreLevel(level) {
      const levelMap = {
        1: "一星级",
        2: "三星级",
        3: "五星级",
        4: "七星级",
        5: "七星级",
      };
      return levelMap[level] || level;
    },
  },
};
</script>

<style lang="less" scoped>
.scalable-pages {
  width: 100%;
  height: 100%;
}

.main {
  background-color: white;
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  // padding: 20px;
}

.store-content {
  display: flex;
  background-image: url("https://www.kdxwindowfilm.com/banners/static/tuoyuan.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  justify-content: space-between;
  aspect-ratio: 1.77;
  height: 1121px;
  width: 1900px;
}

.store-image {
  flex: 0 0 45%;
}

.store-selector {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-right: min(15%, 300px);
  position: relative;
}

.selector-group {
  margin-bottom: 30px;
  position: relative;
  min-height: 120px;

  .header {
    display: flex;
    align-items: center;
    font-size: min(32px, 2vw);
    color: #000;
    font-weight: bold;
    margin-bottom: 22px;

    .selector-label::before {
      content: "*";
      display: inline-block;
      color: #f40c0c;
      margin-right: 1px;
    }
  }

  .selector-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .province-item,
    .city-item,
    .more-btn {
      padding: 0.5vw 10px;
      margin: 0 30px 1vw 0;
      font-size: min(32px, 22px);
      position: relative;
      cursor: pointer;
    }

    .province-item,
    .city-item {
      &.active {
        background-color: #c5000a;
        color: #fff;
      }
    }

    .more-btn {
      color: #999;

      &:hover {
        color: #c5000a;
      }
    }
  }
}

.selector-popup {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 20px);
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;

  .popup-header {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    font-size: min(30px, 2vw);
    font-weight: bold;

    &::before {
      content: "*";
      display: inline-block;
      color: #f40c0c;
      margin-right: 1px;
    }

    .close-popup {
      margin-left: auto;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .popup-content {
    padding: 10px 20px;

    .popup-list {
      display: flex;
      flex-wrap: wrap;

      .popup-item {
        padding: 0.5vw 10px;
        margin: 0 30px 1vw 0;
        font-size: min(32px, 22px);
        cursor: pointer;
        position: relative;

        &.active {
          background-color: #c5000a;
          color: white;
        }
      }
    }
  }
}

.store-select-wrap {
  margin-top: 20px;
}

.custom-option {
  padding: 10px;

  .name {
    font-size: min(32px, 2vw);
    color: #000;
  }

  .address {
    font-size: min(20px, 1.2vw);
    color: #666;
    margin-top: 5px;
  }
}

.no-store-tip {
  margin-top: 20px;
  color: #999;
  font-size: 20px;
}

.close-icon {
  width: 15px;
  height: 15px;
}

.showInfo {
  margin-top: 30px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  display: none;

  &.active {
    display: block;
  }
}

.store-info {
  .store-title {
    font-size: min(28px, 1.8vw);
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .store-details {
    .detail-row {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      font-size: min(24px, 1.5vw);

      &:last-child {
        margin-bottom: 0;
      }

      &.space-between {
        justify-content: space-between;
      }
    }

    .detail-label {
      color: #666;
      margin-right: 10px;
    }

    .detail-value {
      color: #333;
    }

    .call-btn {
      color: #c5000a;
      text-decoration: none;
      cursor: pointer;
      padding: 4px 12px;
      border: 1px solid #c5000a;
      border-radius: 4px;

      &:hover {
        background-color: #c5000a;
        color: white;
      }
    }
  }
}
</style>